<template>
  <div>
    <van-nav-bar title="疫情物资" left-arrow @click-left="$router.go(-1)" />
    <div class="title">
      <div><img src="/head_title.png" alt="" /></div>
      <p>数据来源：国家及各地卫健委每日信息发布</p>
    </div>
    <div class="content">
      <div class="local_title">疫情灾区前10名城市物资详情</div>
      <div class="local_table">
        <div class="local_head">
          <div>城市(区)</div>
          <div>省市区</div>
          <div>医用口罩</div>
          <div>防护服</div>
          <div>医用手套</div>
        </div>
        <div class="local_body" v-if="firstStatisGradeCityDetail">
          <div
            class="local_body_item"
            v-for="(item, index) in firstStatisGradeCityDetail"
            :key="index"
            :class="{ active_color: index % 2 == 1 }"
          >
            <div>{{ item.city }}</div>
            <div>{{ item.province }}</div>
            <div>{{ item.confirmAdd }}万只</div>
            <div>{{ item.nowConfirm }}万套</div>
            <div>{{ item.grade }}万只</div>
          </div>
        </div>
      </div>
      <!-- 预防须知 -->
      <div class="shouldknow">
        <div class="should_title">新冠肺炎预防须知</div>
        <div class="should_content">
          <div>
            <p style="font-size: 3.733vw">个人清洁</p>
            <p>经常保持双手清洁，尤其在触摸口、鼻或眼之前。</p>
            <p>经常用洗手液和清水清洗双手，搓手最少20秒，并用纸巾擦干。</p>
            <p>
              打喷嚏或咳嗽时应用纸巾掩盖口鼻，把用过的纸巾弃置于有盖垃圾箱内，然后彻底清洁双手。
            </p>
          </div>
          <div>
            <p style="font-size: 3.733vw">尽量避免</p>
            <p>减少前往人流密集的场所。如不可避免，应戴上外科口罩。</p>
            <p>
              避免到访医院。如有必要到访医院，应佩戴外科口罩及时刻注重个人和手部卫生。
            </p>
            <p>
              避免接触动物（包括野味）、禽鸟或其粪便；避免到海鲜、活禽市场或农场。
            </p>
            <p>切勿进食野味及切勿光顾有提供野味的餐馆。</p>
            <p>
              注意食物安全和卫生，避免进食或饮用生或未熟透的动物产品，包括奶类、蛋类和肉类。
            </p>
          </div>
          <div>
            <p style="font-size: 3.733vw">尽快就诊</p>
            <p>如有身体不适，特别是有发烧或咳嗽，应戴上外科口罩并尽快就诊。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      getGradeCityDetail: [],
      firstStatisGradeCityDetail: [],
    };
  },
  mounted() {
    this.getCity();
  },
  methods: {
    getCity() {
      let url =
        "https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=statisGradeCityDetail";
      this.axios
        .post(url)
        .then((res) => {
          this.getGradeCityDetail = res.data.data.statisGradeCityDetail;
          this.getGradeCityDetail.forEach((item, index) => {
            if (index < 10) {
              this.firstStatisGradeCityDetail.push(item);
            }
          });
          this.getGradeCityDetail.forEach((item, index) => {
            let confirm = this.getRandom(1, 200);
            let nowconfirm = this.getRandom(1, 100);
            let grade = this.getRandom(1, 150);
            item.confirmAdd = 400 * 1 + confirm * 1;
            item.nowConfirm = 24 * 1 + nowconfirm * 1;
            item.grade = 201 * 1 + grade * 1;
          });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getRandom(m, n) {
      var num = Math.floor(Math.random() * (m - n) + n);
      return num;
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #1074ff;

  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
.title {
  height: 35.8vw;
  margin-top: -2px;
  background: url(/head_bg_new.png) no-repeat center;
  background-size: 100%;
  text-align: center;
  img {
    width: 50%;
    margin-top: 30px;
  }
  p {
    font-size: 3.2vw;
    color: #fff;
  }
}
.content {
  width: 90%;
  height: 90vh;
  margin: 0 auto;
  font-size: 3.2vw;
  .local_title {
    margin-top: 3vw;
    font-size: 4.267vw;
    font-weight: 600;
    color: #222;
  }
  .local_table {
    .local_head {
      display: flex;
      margin-top: 2.667vw;
      font-size: 3.2vw;
      text-align: center;
      div {
        flex: 1;
        background-color: #eef4ff;
        height: 8.533vw;
        line-height: 8.533vw;
        margin: 0 1px;
        color: #4180f1;
      }
    }
    .local_body {
      .local_body_item {
        display: flex;
        text-align: center;
        div {
          flex: 1;
          line-height: 4.267vw;
          padding: 2.933vw 0;
          border-bottom: 1px solid #f5f5f5;
        }
      }
      .active_color {
        // color: #ff7f7f;
        background-color: #eef4ff;
      }
    }
  }
}
.shouldknow {
  margin-top: 6vw;
  margin-bottom: 16vw;
  .should_title {
    font-size: 4.8vw;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3vw;
  }
  .should_content {
    border-radius: 1.6vw;
    background-color: #f8f8f8;
    padding: 1vw 0 1vw 4vw;
  }
}
</style>